<template>
  <div id="display" class="display-box-container" style="z-index: 0">
    <canvas id="map" class="max-screen" aria-hidden="true"></canvas>
    <canvas id="animation" class="fill-screen" aria-hidden="true"></canvas>
    <canvas id="fastoverlay" aria-hidden="true"></canvas>
    <canvas id="overlay" class="fill-screen" aria-hidden="true"></canvas>
    <canvas id="foreground" class="max-screen" aria-hidden="true"></canvas>
    <svg id="annotation" class="fill-screen"></svg>
  </div>
</template>

<script>
import { main, utils } from '../../../lib/main.js';
// import { ref } from 'vue';

export default {
  components: {},
  setup() {
    return {
      projection: 'orthographic'
    };
  },
  data() {
    return {};
  },
  watch: {
    projection(val) {
      this.$nextTick(() => {
        utils.setProjection(val);
      });
    }
  },
  mounted() {
    this.$nextTick(()=>{
      main()
    });
  },
  methods: {}
};
</script>

<style lang="less">
.display-box-container {

}
</style>
